<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>轮播</title>
    
    <script src="../js/jquery.js" type="text/javascript"></script>
    <style type="text/css">
         *{
             font-family: '微软雅黑';
         }

		 html, body{
			margin:0px;
			padding:0px;
			height:200px;
		 }
        .clear{overflow:hidden; clear:both; width:0px; height:0px; }
        .imgbox{width: 100%;
            margin: 0 auto;
            text-align: center;
            height: 200px;}
         ul{padding:0px; margin:0px;width: 100%;
             height: 100%;}
         ul li{float:left; list-style:none;width: 100%;
             height: 200px; }
         ul li.select{display:block;}
        .imgnum div{
            cursor: pointer;
            float: left;
            width: 33.3%;
            line-height: 50px;
            font-size: 18px;
            background: #c3bbc7;
            opacity: 0.8;
        }
        .imgnum div.onselect{background-color:rgb(33, 61, 125);;color: #ffffff; opacity: 0.8;}
        .imgnum{text-align: center;
            float: right;
            position: relative;
            width: 100%;top: -50px;}
    </style>
</head>
<body>
<div class="imgbox" style="background:#000000 ">
    <ul id="banner_img">
        <li style="background-image: url(../images/bg1.png); display: list-item;"></li>
        <li style="background-image: url(../images/bg2.png); display: none;"></li>
        <li style="background-image: url(../images/bg3.png); display: none;"></li>
    </ul>
    <div class="clear"></div>
    <div class="imgnum">
        <div class="onselect"><input type="hidden" value="1">没有条件,创造条件</div>
        <div class=""><input type="hidden" value="2">为客户创造价值</div>
        <div class=""><input type="hidden" value="3">相信世界是公平的</div>
    </div>
</div>
<script type="text/javascript">
    var time = "";
    var index = 1;
    $(function () {
        showimg(index);
        //鼠标移入移出
        $(".imgnum div").hover(function () {
            clearTimeout(time);
            var icon=$(this).find("input[type='hidden']").val();
            $(".imgnum div").removeClass("onselect").eq(icon-1).addClass("onselect");
            $("#banner_img li").hide().stop(true,true).eq(icon-1).fadeIn("slow");
        }, function () {
            index=$(this).find("input[type='hidden']").val()> 2 ? 1 :parseInt($(this).find("input[type='hidden']").val())+1;
            time = setTimeout("showimg(" + index + ")", 4000);
        });
    });

    function showimg(num) {
        index = num;
        $("#banner_img li").hide().stop(true,true).eq(index-1).fadeIn("fast");
        $(".imgnum div").removeClass("onselect").eq(index-1).addClass("onselect");
        index = index + 1 > 3 ? 1 : index + 1;
        time = setTimeout("showimg(" + index + ")", 4000);
    }
</script>
</body></html>